<!-- 提现进度 -->
<template>
	<Modal 
    class="schedule-detail" 
    class-name="vertical-center-modal" 
    width="420" 
    v-model="scheduleShow"
    :footer-hide="true"
    :title="$t('setting.withdrawRecordSchedule')">
    <div class="schedule-content">
      <div class="bg-f5f f-14 lin-20 col-222 p-16">
        <!-- 提现金额 -->
        <div class="flex a-c j-sb">
          <div>
            {{ scheduleObj.payeeInfoVOList && scheduleObj.payeeInfoVOList.length >= 2 ? $t('setting.withdrawalTotalAmount') : $t('user.withdrawalAmount') }}：
          </div>
          <div class="bold">
            CNY {{ scheduleObj.amount || '' }} {{scheduleObj.currency && scheduleObj.currency != 'CNY' ? `≈ ${scheduleObj.currency} ${scheduleObj.amountWithRate}` : ''}}
          </div>
        </div>
        <!-- 提现渠道 -->
        <div v-if="scheduleObj.payeeInfoVOList && scheduleObj.payeeInfoVOList.length == 1" class="flex a-c j-sb mt-12">
          <div>
            {{ $t('setting.withdrawChannel') }}：
          </div>
          <div class="bold">
            {{ scheduleObj.payeeInfoVOList[0].payeeChannelCode }}
          </div>
        </div>
        <!-- 多次提现 -->
        <div v-if="scheduleObj.payeeInfoVOList && scheduleObj.payeeInfoVOList.length >= 2" class="ml-4 schedule-multiple">
          <div
            v-for="(item,index) in scheduleObj.payeeInfoVOList" :key="index"
            >
            <div class="flex a-c j-sb pos-r pt-16 pl-8">
              <div>
                {{ $t('setting.withdrawChannel') }} {{ index + 1 }}:
              </div>
              <div class="bold">
                {{ item.payeeChannelCode||'-' }}
              </div>
              <div class="flex a-c j-c pos-a bg-f5f item-circle">
                <div class="circle-content"></div>
              </div>
              <div class="pos-a item-line"></div>
            </div>
            <div class="flex a-c j-sb pl-8 pos-r pt-4">
              <div>
                {{ $t('user.withdrawalAmount') }}:
              </div>
              <div class="bold">
                CNY {{ item.payeeAmount || '' }} {{scheduleObj.currency && scheduleObj.currency != 'CNY' ? `≈ ${scheduleObj.currency} ${item.amountWithRate}` : ''}}
              </div>
              <div v-if="index + 1 != scheduleObj.payeeInfoVOList.length" class="pos-a item-line"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-27 pl-16 schedule-timeline">
        <Timeline>
          <!-- 提交提现申请 -->
          <TimelineItem class="timeline-1" :class="{'timeline-active':scheduleObj.status != 'audit'}">
            <div class="bold f-16 lin-22 col-222">
              {{ $t('setting.submitWithdrawalRequest') }}
            </div>
            <div class="col-888 f-14 lin-20 mt-4">
              {{ scheduleObj.createTime || '' }}
            </div>
          </TimelineItem>
          <!-- 审核 -->
          <TimelineItem :class="{'timeline-active':scheduleObj.status != 'audit'}">
            <div class="bold f-16 lin-22" :class="scheduleObj.status == 'refusal' ? 'col-ff1' : scheduleObj.status == 'audit' ? 'col-888' : 'col-222'">
              {{ scheduleObj.status == 'refusal' ? $t('setting.reviewRejected') : $t('setting.reviewApproved') }}
            </div>
            <div class="col-888 f-14 lin-20 mt-4">
              {{ scheduleObj.status == 'refusal' ? scheduleObj.refuseTime : scheduleObj.auditSuccessTime }}
            </div>
            <div class="mt-8 col-ff1" v-if="scheduleObj.status == 'refusal' && scheduleObj.message">
              {{$t('setting.withdrawRecordReason')}}:{{ scheduleObj.message }}
            </div>
          </TimelineItem>
          <!-- 提现处理 -->
          <TimelineItem v-if="scheduleObj.status != 'refusal'" :class="{'timeline-active':scheduleObj.status != 'audit' && scheduleObj.status != 'refusal' && scheduleObj.status != 'processing'}">
            <div class="bold f-16 lin-22" :class="scheduleObj.status == 'failed' ? 'col-ff1' : scheduleObj.status == 'audit' || scheduleObj.status == 'processing' ? 'col-888' : 'col-222'">
              {{ scheduleObj.status == 'failed' ? $t('setting.withdrawalFailed') : $t('setting.withdrawalProcessed') }}
            </div>
            <div class="col-888 f-14 lin-20 mt-4">
              {{ scheduleObj.status == 'failed' ? scheduleObj.refuseTime : scheduleObj.transferTime }}
            </div>
            <div class="mt-8 col-ff1" v-if="scheduleObj.status == 'failed' && scheduleObj.message">
              {{$t('setting.withdrawRecordReason')}}:{{ scheduleObj.message }}
            </div>
          </TimelineItem>
        </Timeline>  
      </div>
    </div>
    <Spin size="large" fix v-if="loading"></Spin>
  </Modal>
</template>

<script>
import { withdrawDetail } from "@/api/withdraw";

	export default{
		data(){
			return{
				scheduleObj:{
          payeeInfoVOList:[]
        },
        scheduleShow:false,
        loading:false,
			}
		},
		methods:{
			open(item){
        this.getWithdrawDetail(item.id);
        this.scheduleShow = true;
      },
      close(){
        this.scheduleShow = false;
        this.scheduleObj = {};
      },
      getWithdrawDetail(id){
        this.loading = true;
        withdrawDetail({withdrawApplyId:id}).then(res => {
          this.scheduleObj = res.result;
          this.scheduleObj.payeeInfoVOList = res.result.payeeInfoVOList ? res.result.payeeInfoVOList : [];
          this.loading = false;
        }).catch(()=>{
          this.loading = false;
        })
      }
		}
	}
</script>

<style lang="less" scoped>
	.schedule-detail{
    .schedule-multiple{
      .item-circle{
        height: 16px;
        top: 20px;
        left: -3px;
        z-index: 1;
        .circle-content{
          background: #888;
          border-radius: 50%;
          width:6px;
          height: 6px;
        }
      }
      .item-line{
        border-left: 1px solid #888;
        height: 100%;
        left: 0px;
        top: 0px;
      }
    }
    .schedule-timeline{
      /deep/ .ivu-timeline-item-head-blue{
        background: #E2E2E2;
        border: none;
      }
      /deep/ .ivu-timeline-item-tail{
        border-left-color: #E2E2E2;
      }
      /deep/ .timeline-active .ivu-timeline-item-head-blue{
        background: #FF186B;
      }
      /deep/ .timeline-active .ivu-timeline-item-tail{
        border-left-color: #FF186B;
      }
      /deep/ .timeline-1 .ivu-timeline-item-head-blue{
        background: #FF186B;
      }
    }
  }
</style>